<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Slot</title>
  <!-- 插槽 -->
  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
  <div id="app">
    <reserve-slot> 后备插槽 </reserve-slot>
    </br>
    </br>
    </br>
    <named-slot>
      <template v-slot:header>
        具名插槽：Header
      </template>
      <template>
        具名插槽：Main
      </template>
      <template v-slot:footer>
        具名插槽：Footer
      </template>
    </named-slot>
    </br>
    </br>
    </br>
    <!-- <props-slot>
      <template v-slot:default="slotProps">
        内容：{{slotProps.user}}{{user.msg}}
      </template>
    </props-slot> -->

    <named-slot>
      <template #header>
        绑定缩写：#Header
      </template>
      <template #default>
        绑定缩写：#Default
      </template>
      <template #footer>
        绑定缩写：#Footer
      </template>
    </named-slot>

    </br>
    </br>
    </br>
    <todo-list v-bind:todos="todos">
      <template v-slot:todo="todo">
        <span v-if="todo.isComplete">🌟</span>
        {{todo.text}}
      </template>
    </todo-list>

  </div>
</body>
<script>
  let vm = new Vue({
    el: '#app',
    data: {
      user:{
        msg: 'This is from parent compoennt.',
        type: 'String'
      },
      todos:[
        {
          isComplete: true,
          text: 'A',
          id: '1'
        },
        {
          isComplete: true,
          text: 'B',
          id: '2'
        },
        {
          isComplete: false,
          text: 'C',
          id: '3'
        },
        {
          isComplete: true,
          text: 'D',
          id: '4'
        },
        {
          isComplete: false,
          text: 'E',
          id: '5'
        },
      ]
    },
    components: {
      //后备内容
      'reserve-slot': {
        props: [],
        template: `
          <div>
            插槽内容：<slot></slot><slot></slot><slot></slot>
          </div>
        `
      },
      //具名插槽
      'named-slot': {
        props: [],
        template: `
          <div>
            <div>
              插槽内容-<slot name="header"></slot>
            </div>
            <div>
              插槽内容-<slot name="default"></slot>
            </div>
            <div>
              插槽内容-<slot name="footer"></slot>
            </div>
          </div>
        `
      },
      //作用域插槽
      // 'props-slot': {
      //   props: [],
      //   template: `
      //     <div>
      //       <slot></slot>
      //     </div>
      //   `
      // }
      'todo-list': {
        props:[
          'filteredTodos'
        ],
        template: `
        <ul>
          <li
            v-for="todo in filteredTodos"
            v-bind:key="todo.id"
          >
            <slot name="todo" v-bind:todo="todo">
              <!-- 后备内容 -->
              {{ todo.text }}
            </slot>
          </li>
        </ul>
        `
      }
    }
  })
</script>
</html>